<!--
 * @Author       : Hejh(3010733382@qq.com)
 * @Version      : V1.0
 * @Date         : 2024-03-03 19:28:05
 * @Description  : 批量设置部门的空间大小
-->

<template>
  <!-- <n-card
    :size="'small'"
    style="width: 540px"
    role="dialog"
    title="设置部门空间大小"
    :bordered="false"
    aria-modal="true"
  >
    <template #header-extra>
      <SvgIcon
        icon="chacha"
        class="cursor-pointer"
        @click="handleClose"
      ></SvgIcon>
    </template>
    <n-divider class="!my-2" /> -->
  <n-form
    ref="depSizeMaxFormRef"
    :label-width="isSmall ? 100 : 120"
    label-placement="left"
    :label-align="isSmall ? 'left' : 'right'"
    :model="dep"
    size="small"
    require-mark-placement="right"
    :rules="formRule"
  >
    <n-form-item label="已选部门：" path="depIds">
      <DepSelect
        :root-dep="rootDep"
        :default-dep-ids="dep.depIds"
        @change-value="handleDepIdsChange"
        class="!w-[300px]"
      ></DepSelect>
    </n-form-item>

    <n-form-item label="空间大小：" path="sizeMax">
      <n-input-number
        :value="+convertBytes(dep.sizeMax, 'GB')"
        @update:value="handleByteChange"
        :min="0"
        :max="2048"
        clearable
        placeholder="请输入空间大小"
      >
        <template #suffix> GB </template>
      </n-input-number>
      <div class="ml-[12px] text-gray-400 text-[12px]">(GB) 0则不限制</div>
    </n-form-item>

    <n-form-item label=" " v-permission="[PERMISSIONS.DEP_EDIT]">
      <n-button type="primary" class="grent-btn w-[120px]" @click="handleSave">
        保存
      </n-button>
    </n-form-item>
  </n-form>
  <!-- </n-card> -->
</template>

<script setup lang="ts">
import type { FormInst } from 'naive-ui'
import type { DepartmentSetSizeMax } from '@/types/department'
import { userMenuShow } from '@/hooks/useMenuShow'
import { PERMISSIONS } from '@/constants/permission'
import { convertBytes, convertToBytes } from '@/utils/index'
import type { IndexObj } from '@/types/commom'

const emits = defineEmits<{
  (e: 'visibleChange', value: boolean): void
  (e: 'setDepSizeMax', data: DepartmentSetSizeMax): void
}>()

const props = defineProps<{
  checkDepIds: string[]
  rootDep?: IndexObj
}>()

const handleClose = () => {
  emits('visibleChange', false)
}

const { isSmall } = userMenuShow()

const dep = reactive<DepartmentSetSizeMax>({
  depIds: [],
  sizeMax: '0'
})

const initUser = () => {
  dep.depIds = props.checkDepIds
  dep.sizeMax = '0'
}

onMounted(() => {
  initUser()
})

const handleByteChange = (value: any) => {
  if (value === undefined || value === null || value === '') {
    return
  }
  if (!/^\d+$/.test(value)) {
    return
  }
  dep.sizeMax = convertToBytes('' + value + 'GB')
}

const handleDepIdsChange = (value: string[] | string) => {
  dep.depIds = value as string[]
}

const formRule = {
  sizeMax: [
    {
      required: true,
      message: '请输入部门空间大小',
      trigger: ['blur']
    }
  ]
  // userIds: [
  //   {
  //     required: true,
  //     message: '请选择用户',
  //     trigger: ['blur', 'change']
  //   }
  // ]
}

const depSizeMaxFormRef = ref<FormInst | null>(null)

const handleSave = () => {
  depSizeMaxFormRef.value?.validate((error: any) => {
    if (error) {
      return
    }

    emits('setDepSizeMax', dep)
  })
}
</script>

<style scoped lang="scss"></style>
